<script setup lang="ts">
import {
  Notification,
  ChatDotRound,
  Platform,
} from "@element-plus/icons-vue";
const props = defineProps(["isCollapse"]);
</script>

<template>
  <h3 v-if="!props.isCollapse">物料主替代料表單系統</h3>
  <div
    v-if="props.isCollapse"
    style="
      width: 60px;
      height: 60px;
      line-height: 75px;
      text-align: center;
      color: #ffd04b;
      padding-left: 5px;
    "
  >
    <el-icon :size="25">
      <Platform></Platform>
    </el-icon>
  </div>
  <el-menu
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    padding="0px"
    :collapse="props.isCollapse"
    :collapse-transition="props.isCollapse"
    style="border: 0"
    router
  >
    <el-menu-item index="/home">
      <el-icon :size="20"><ChatDotRound /></el-icon>
      <template #title><span class="single-menu">待辦事項</span></template>
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-icon :size="20">
          <Notification />
        </el-icon>
        <span class="single-menu">表單操作</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/materialSub/apply">表單申請</el-menu-item>
        <el-menu-item index="/materialSub/approve">表單審核</el-menu-item>
        <el-menu-item index="/materialSub/trace">流程追蹤</el-menu-item>
        <el-menu-item index="/materialSub/docinfo">表單查詢</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<style>
h3 {
  font-size: 15px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
  color: #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.single-menu{
    padding-left: 10px;
    padding-top: 3px;
}
.el-menu-item-group .is-active{
    background-color: rgba(65, 175, 175, 0.4);
}

</style>
